<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=m43tw9ojhPo4MV2SjSlqGU60Pvewrady"></script>
    <title>视角动画</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	var bmap = new BMapGL.Map("allmap");    // 创建Map实例
	bmap.centerAndZoom(new BMapGL.Point(116.362943, 39.927034), 15);  // 初始化地图,设置中心点坐标和地图级别
    bmap.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放


    var path = [{
        'lng': 116.362943,
        'lat': 39.927034
    }, {
    	'lng': 116.362818,
    	'lat': 39.929427
    }, {
    	'lng': 116.359629,
    	'lat': 39.929257
    }, {
    	'lng': 116.351117,
    	'lat': 39.928929
    }, {
    	'lng': 116.341245,
    	'lat': 39.928635
    }, {
    	'lng': 116.332396,
    	'lat': 39.929254
    }, {
    	'lng': 116.316699,
    	'lat': 39.930049
    }];
    var point = [];
    for (var i = 0; i < path.length; i++) {
        point.push(new BMapGL.Point(path[i].lng, path[i].lat));
    }
    var pl = new BMapGL.Polyline(point);
    setTimeout('start()', 3000);
    function start () {
        trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
            overallView: true,
            tilt: 30,
            duration: 10000,
            delay: 30
        });
        trackAni.start();
    }
</script>
